<template>
  <div class="flex">
    <aCard title="基本用法">
      <a-radio value="radio">Radio</a-radio>
      <a-radio value="disabled radio" :default-checked="true" disabled
        >Disabled Radio</a-radio
      >
    </aCard>

    <aCard title="受控">
      <a-radio v-model="checked1">v-model</a-radio>
      <a-radio :model-value="true">binding "true"</a-radio>
      <a-radio :model-value="checked2">binding value2</a-radio>
      <a-radio :default-checked="true">uncontrolled state</a-radio>
      <a-button type="primary" @click="handleSetCheck">
        {{ checked2 ? "uncheck" : "check" }} value2
      </a-button>
      <a-button @click="handleReset"> reset all </a-button>
    </aCard>

    <aCard title="单选框组">
      <a-radio-group>
        <a-radio value="A">A</a-radio>
        <a-radio value="B">B</a-radio>
        <a-radio value="C">C</a-radio>
        <a-radio value="D">D</a-radio>
      </a-radio-group>

      <a-radio-group>
        <a-radio value="A">A</a-radio>
        <a-radio value="B">B</a-radio>
        <a-radio value="C">C</a-radio>
        <a-radio value="D" disabled>D</a-radio>
      </a-radio-group>
    </aCard>

    <aCard title="单选框组选项">
      <a-radio-group v-model="value1" :options="plainOptions" />
      <a-radio-group v-model="value2" :options="options" />
      <a-radio-group v-model="value2" :options="options">
        <template #label="{ data }">
          <a-tag> {{ data.label }}</a-tag>
        </template>
      </a-radio-group>
    </aCard>

    <aCard title="方向">
      <a-radio-group direction="vertical">
        <a-radio value="A">A</a-radio>
        <a-radio value="B">B</a-radio>
        <a-radio value="C">C</a-radio>
        <a-radio value="D">D</a-radio>
      </a-radio-group>
    </aCard>

    <aCard title="按钮类型的单选框组">
      <a-radio-group type="button">
        <a-radio value="Beijing">Beijing</a-radio>
        <a-radio value="Guangzhou">Guangzhou</a-radio>
        <a-radio value="Shenzhen">
          <a-tag> Guangzhou</a-tag>
        </a-radio>
      </a-radio-group>
    </aCard>

    <aCard title="按钮类型单选框组的尺寸">
      <a-radio-group type="button" size="mini">
        <a-radio value="Beijing">Beijing</a-radio>
        <a-radio value="Shanghai">Shanghai</a-radio>
        <a-radio value="Guangzhou">Guangzhou</a-radio>
        <a-radio value="Shenzhen">Shenzhen</a-radio>
      </a-radio-group>
      <a-radio-group type="button" size="small">
        <a-radio value="Beijing">Beijing</a-radio>
        <a-radio value="Shanghai">Shanghai</a-radio>
        <a-radio value="Guangzhou">Guangzhou</a-radio>
        <a-radio value="Shenzhen">Shenzhen</a-radio>
      </a-radio-group>
      <a-radio-group type="button">
        <a-radio value="Beijing">Beijing</a-radio>
        <a-radio value="Shanghai">Shanghai</a-radio>
        <a-radio value="Guangzhou">Guangzhou</a-radio>
        <a-radio value="Shenzhen">Shenzhen</a-radio>
      </a-radio-group>
      <a-radio-group type="button" size="large">
        <a-radio value="Beijing">Beijing</a-radio>
        <a-radio value="Shanghai">Shanghai</a-radio>
        <a-radio value="Guangzhou"> <a-tag> Guangzhou</a-tag></a-radio>
      </a-radio-group>
    </aCard>

    <aCard title="自定义单选框">
      <a-radio-group default-value="1">
        <a-radio value="1">
          <template #radio="{ checked }">
            <a-tag :checked="checked" checkable>This is a tag radio 1</a-tag>
          </template>
        </a-radio>
        <a-radio value="2">
          <template #radio="{ checked }">
            <a-tag :checked="checked" checkable>This is a tag radio 2</a-tag>
          </template>
        </a-radio>
        <a-radio value="3">
          <template #radio="{ checked }">
            <a-tag :checked="checked" checkable>This is a tag radio 3</a-tag>
          </template>
        </a-radio>
      </a-radio-group>
    </aCard>
  </div>
</template>

<script setup lang="ts">
import aCard from "@/ArcoUni/components/arco-card/index.vue";
import { ref } from "vue";
const checked1 = ref(false);
const checked2 = ref(false);

const value1 = ref("plain 1");
const plainOptions = ["plain 1", "plain 2", "plain 3"];

const value2 = ref("1");
const options = [
  { label: "option 1", value: "1" },
  { label: "option 2", value: "2" },
  { label: "option 3", value: "3", disabled: true },
];

const handleSetCheck = () => {
  checked2.value = !checked2.value;
};

const handleReset = () => {
  checked1.value = false;
  checked2.value = false;
};
</script>

<style lang="scss" scoped>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  //   background: #e5e5e5;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}
</style>
